<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryForm"
			:inline="true"
			:model="queryParams"
			label-width="70px"
		>
			<el-form-item label="系统模块" prop="title">
				<el-input
					v-model="queryParams.title"
					clearable
					placeholder="请输入系统模块"
					style="width: 240px"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="操作人员" prop="operName">
				<el-input
					v-model="queryParams.operName"
					clearable
					placeholder="请输入操作人员"
					style="width: 240px"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="类型" prop="businessType">
				<el-select
					v-model="queryParams.businessType"
					clearable
					placeholder="操作类型"
					style="width: 240px"
					@change="handleQuery()"
				>
					<el-option
						v-for="(dict, index) in sys_oper_type"
						:key="index"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select
					v-model="queryParams.status"
					clearable
					placeholder="操作状态"
					style="width: 240px"
					@change="handleQuery()"
				>
					<el-option
						v-for="(dict, index) in sys_common_status"
						:key="index"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="操作时间" style="font-weight: bold">
				<el-date-picker
					v-model="dateRange"
					end-placeholder="结束时间"
					format="YYYY-MM-DD HH:mm:ss"
					range-separator="-"
					start-placeholder="开始时间"
					type="datetimerange"
					value-format="YYYY-MM-DD HH:mm:ss"
					@change="handleQuery()"
				></el-date-picker>
			</el-form-item>
			<el-form-item class="item-search">
				<!-- prettier-ignore -->
				<el-button icon="refresh" @click="resetQuery()">重置</el-button>
				<!-- prettier-ignore -->
				<el-button icon="search" type="primary" @click="handleQuery()">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['monitor:operlog:remove']"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="handleClean"
				>清空
				</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['monitor:operlog:export']"
					:loading="exportLoading"
					icon="download"
					plain
					size="small"
					type="warning"
					@click="handleExport"
				>导出
				</el-button
				>
			</el-col>
			<el-col v-if="!multiple" :span="1.5">
				<el-button
					v-hasPermi="['monitor:operlog:remove']"
					:disabled="multiple"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="handleDelete"
				>删除
				</el-button
				>
			</el-col>
			<!-- prettier-ignore -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList()" />
		</el-row>

		<el-table
			ref="pageTableRef"
			v-loading="loading"
			:data="list"
			:default-sort="defaultSort"
			:row-key="getRowKeys"
			height="560"
			@selection-change="handleSelectionChange"
			@sort-change="handleSortChange"
		>
			<!-- prettier-ignore -->
			<el-table-column :reserve-selection="true" align="center" type="selection" width="55" />
			<!-- prettier-ignore -->
			<el-table-column align="center" label="日志编号" prop="operId" />
			<!-- prettier-ignore -->
			<el-table-column align="center" label="系统模块" prop="title" width="150" />
			<el-table-column
				align="center"
				label="操作类型"
				prop="businessType"
			>
				<template #default="scope">
					<!-- prettier-ignore -->
					<dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="请求方式"
				prop="requestMethod"
			/>
			<el-table-column
				:show-overflow-tooltip="true"
				:sort-orders="['descending', 'ascending']"
				align="center"
				label="操作人员"
				prop="operName"
				sortable="custom"
				width="150"
			/>
			<el-table-column
				:show-overflow-tooltip="true"
				align="center"
				label="操作地址"
				prop="operIp"
				width="180"
			/>
			<el-table-column
				:show-overflow-tooltip="true"
				align="center"
				label="操作地点"
				prop="operLocation"
			/>
			<el-table-column
				align="center"
				label="操作状态"
				prop="status"
				width="150"
			>
				<template #default="scope">
					<!-- <el-tag :type="scope.row.status === 0 ? 'success' :'warning'">{{scope.row.status === 0 ? "正常": "异常" }}</el-tag> -->
					<!-- prettier-ignore -->
					<dict-tag :options="sys_common_status" :value="scope.row.status" />
					<!-- <DataSingleTag
						:single-data="scope.row.status.toString()"
						:status-options="sys_common_status"
					/> -->
				</template>
			</el-table-column>
			<el-table-column
				:sort-orders="['descending', 'ascending']"
				align="center"
				label="操作日期"
				prop="operTime"
				sortable="custom"
				width="200"
			>
				<template #default="scope">
					<span>{{ scope.row.operTime }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				class-name="small-padding fixed-width"
				label="操作"
				width="200"
			>
				<template #default="scope">
					<el-link
						v-hasPermi="['monitor:operlog:query']"
						:underline="false"
						class="table_link_btn"
						icon="view"
						title="点击查看详情"
						type="primary"
						@click="handleView(scope.row)"
					>
						<!-- prettier-ignore -->
						<span class="table_link_text">详细</span>
					</el-link>
					<el-link
						v-hasPermi="['monitor:operlog:query']"
						:underline="false"
						class="table_link_btn"
						icon="delete"
						type="danger"
						@click="handleDelete(scope.row)"
					>
						<!-- prettier-ignore -->
						<span class="table_link_text">删除</span>
					</el-link>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="getList()"
		/>

		<!-- 操作日志详细 -->
		<el-dialog
			v-model="open"
			append-to-body
			title="操作日志详细"
			width="40%"
			@close="cleanSelect()"
		>
			<el-form ref="formRef" :model="form" label-width="100px">
				<el-row>
					<el-col :span="12">
						<!-- prettier-ignore -->
						<el-form-item :show-overflow-tooltip="true" label="操作模块：">
							{{ form.title }} / {{ typeFormat(form) }}
						</el-form-item>
						<!-- prettier-ignore -->
						<el-form-item :show-overflow-tooltip="true" label="登录信息：">
							<!-- prettier-ignore -->
							{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<!-- prettier-ignore -->
						<el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
						<!-- prettier-ignore -->
						<el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<!-- prettier-ignore -->
						<el-form-item label="操作方法：">{{ form.method }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<!-- prettier-ignore -->
						<el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<!-- prettier-ignore -->
						<el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="操作状态：">
							<!-- <div v-if="form.status === 0">正常</div>
							<div v-else-if="form.status === 1"  style="background: red;">失败</div> -->
							<!-- prettier-ignore -->
							<el-tag :type="form.status === 0 ? 'success' : 'danger'" class="ml-2">
								{{ form.status === 0 ? "正常" : "失败" }}
							</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<!-- prettier-ignore -->
						<el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<!-- prettier-ignore -->
						<el-form-item v-if="form.status === 1" label="异常信息：">
							<span style="color: #FFA500;font-size: 16px;">{{ form.errorMsg }}</span>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="OperaLog" setup>
import OperaLog from "@/api/request/monitor/log/operaLog";
// prettier-ignore
const {
	loading,
	exportLoading,
	multiple,
	showSearch,
	total,
	list,
	open,
	dateRange,
	defaultSort,
	form,
	queryParams,
	sys_common_status,
	sys_oper_type,
	formRef,
	queryForm,
	getList,
	typeFormat,
	handleQuery,
	resetQuery,
	handleSelectionChange,
	handleSortChange,
	handleView,
	handleDelete,
	handleClean,
	handleExport,
	pageTableRef,
	cleanSelect,
	getRowKeys,
} = OperaLog();
</script>
